<template>
  <div class="container">
    <div class="cards-row">
      <div class="card">
        <p class="card-title  text-center">用户性别比例</p>
        <div class="separator"></div>
        <div ref="genderRatioContainer" class="chart-container" style="width: 100% ;height: 100% ;margin: auto"></div>

      </div>
      <div class="card">
        <p class="card-title text-center">用户年龄分布</p>
        <div class="separator"></div>
        <!-- <div ref="numberContainer" class="chart-container" style="width: 250px ;height: 100%;margin: auto"></div> -->
        <!-- <div ref="lineChartContainer" class="chart-container" style="width: 100% ;height: 100%;margin: auto"></div> -->
        <div ref="pieChartContainer" class="chart-container" style="width: 250px ;height: 100%;margin: auto"></div>
      </div>
      <div class="card">
        <p class="card-title text-center">今日登录人数比例</p>
        <div class="separator"></div>
        <div ref="chartContainer" class="chart-container" style="width: 100% ;height: 100% ;margin: auto"></div>

      </div>
      <div class="card">
        <p class="card-title text-center">实时登录人数</p>
        <div class="separator"></div>
        <div ref="numberContainer" class="chart-container" style="width: 250px ;height: 100%;margin: auto"></div>

        <!-- <div ref="lineChartContainer" class="chart-container" style="width: 100% ;height: 100%;margin: auto"></div> -->
        <!-- <div ref="pieChartContainer" class="chart-container" style="width: 250px ;height: 100%;margin: auto"></div> -->
      </div>
    </div>
    <div class="cards-row2">
      <div class="big-card">
        <p class="card-title text-center">每日活跃用户</p>
        <div class="separator"></div>
        <div ref="lineChartContainer" class="chart-container" style="width: 100% ;height: 100%;margin: auto"></div>
        <!-- <div ref="pieChartContainer" class="chart-container" style="width: 250px ;height: 100%;margin: auto"></div> -->
        <!-- <div ref="lineChartContainer" class="chart-container" style="width: 100% ;height: 100%;margin: auto"></div> -->
      </div>
      <div class="big-card">
        <p class="card-title text-center">用户地区分布</p>
        <div class="separator"></div>
        <div style="height: 100%;width: 100%" ref="chinaMapContainer" class="chart-container"></div>
      </div>
    </div>
  </div>


</template>
<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill';
// import 'echarts-gl';
import "echarts-gl";
// import "./components/map/china.json";
import axios from 'axios';
import mapData from '@/static/china.json'
import chinaJSON from '@/components/map/china.json'
import { onMounted, ref } from 'vue'




let regions = [
  {
    name: '新疆维吾尔自治区',
    itemStyle: {
      areaColor: '#374ba4',
      opacity: 1,
    },
  },
  {
    name: '甘肃省',
    itemStyle: {
      areaColor: '#fe9b45',
      opacity: 1,
    },
  },
  {
    name: '陕西省',
    itemStyle: {
      areaColor: '#fd691b',
      opacity: 1,
    },
  },
  {
    name: '北京市',
    itemStyle: {
      areaColor: '#ffc556',
      opacity: 1,
    },

  },
  {
    name: '云南省',
    itemStyle: {
      areaColor: '#ffc556',
      opacity: 1,
    },

  },
  {
    name: '湖南省',
    itemStyle: {
      areaColor: '#ffc556',
      opacity: 1,
    },}
]
let scatter = [
  { name: '北京', value: [116.46122, 39.97886, 9] },
  { name: '兰州', value: [103.86615, 36.040129,23 ] },
  { name: '新疆', value: [87.613228, 43.810394, 9] },
  { name: '湖南', value: [112.915204, 28.207735, 12] },
  { name: '西安', value: [108.953445, 34.288842, 35] },
  { name: '云南', value: [102.710002, 25.045806, 18] },
]

export default {  
  name: 'ChartsDemo', 
   data() {
        return {
            chart: null,
            pieChart: null, // 饼状图实例  
            lineChart: null, // 折线图实例 
            numberChart: null, // 折线图实例 
          myChart: null,
          chinaMap:null,
            mapList:mapData,
            onlineCount: '', // 响应式数据，用于存储在线人数 
          genderDistribution: {
            male: 100, // 静态的男性用户数量
            female: 150, // 静态的女性用户数量
          }, // 用
        };
    }, 
    created(){
      this.fetchOnlineCount();
    },
  mounted() {
    this.chinaMap = echarts.init(this.$refs.chinaMapContainer);
    this.drawChina();
        this.chart = echarts.init(this.$refs.chartContainer);
        this.drawChart();
        this.pieChart = echarts.init(this.$refs.pieChartContainer);  
        // this.drawPieChart();  
        this.numberChart = echarts.init(this.$refs.numberContainer);
    this.genderRatioChart = echarts.init(this.$refs.genderRatioContainer);
    this.drawGenderRatioChart(); // 绘制静态的男女用户比例图
        // this.drawNumberChart();  
    // 初始获取在线人数  
       this.fetchOnlineCount();

    // 如果需要定时更新，可以使用setInterval
    // setInterval(this.fetchOnlineCount, 60000); // 每60秒更新一次 
        this.lineChart = echarts.init(this.$refs.lineChartContainer);  
        // this.drawLineChart();  
        this.fetchAge();
         this.fetchActivity();

    // this.myChart = echarts.init(this.$refs.myChartContainer);
    // this.drawMyChart();  
    // this.$nextTick(() => {
    //   this.initEchartMap();
    // });
       
    },
  methods: {
  drawChina() {
  echarts.registerMap('china', chinaJSON); // 注册可用的地图

  const option = {
    geo: {
      map: 'china',
      roam: true, // 是否允许缩放，拖拽
      zoom: 1, // 初始化大小
      // 缩放大小限制
      scaleLimit: {
        min: 1, // 最小
        max: 2, // 最大
      },
      // 设置中心点
      center: [115.97, 29.71],
      // 省份地图添加背景
      regions: regions,
      itemStyle: {
        areaColor: 'rgb(48,65,86)',
        color: 'red',
        borderColor: '#232652',
        borderWidth: 2,
      },
      // 高亮状态
      emphasis: {
        itemStyle: {
          areaColor: '#1af9e5',
          color: '#fff',
        },
      },
    },
    // 配置属性
    series: [
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: scatter.map(item => {
          // 修改黑龙江的value为5
          if (item.name === '黑龙江省') {
            item.value[2] = 5; // 人数设置为5
          }
          return item;
        }),
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke', // 波纹的绘制方式，可选 'stroke' 和 'fill'
        },
        hoverAnimation: true, // 是否开启鼠标 hover 的提示动画效果
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: true,
          },
        },
        itemStyle: {
          normal: {
            color: '#ffffff', // 散点的颜色
            shadowBlur: 10,
            shadowColor: 20,
            fontSize: '12px',
          },
          color: function (params) {
            // 数组定义的一种颜色
            var colorList = [
              ['#f24a78', '#fedce6', '#f24a78']
            ];

            var index = params.dataIndex;
            if (params.dataIndex >= colorList.length) {
              index = params.dataIndex % colorList.length;
            }

            return new echarts.graphic.LinearGradient(1, 0, 0, 0,
              [
                { offset: 0, color: colorList[0][0] },
                { offset: 0.5, color: colorList[0][1] },
                { offset: 1, color: colorList[0][2] }
              ]);
          },
          barBorderRadius: 5,
        },
        zlevel: 1,
      },
    ],
    tooltip: {
      formatter: (params) => {
        if (params.name && params.value[2]) {
          return `${params.name}:${params.value[2]}人`;
        }
        return '';
      },
    },
  };
  this.chinaMap.setOption(option);
},

    drawGenderRatioChart() {
      const optionGender = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '70%', // 将图例放置在饼状图的顶部
          left: 'center' // 将图例放置在饼状图的左侧
        },
        series: [
          {
            name: '男女用户比例',
            type: 'pie',
            radius: [20, 50], // 调整半径范围，使其变小
            center: ['50%', '40%'], // 饼状图上移5%
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true, // 显示文本标签
              position: 'top', // 文本标签位于顶部
              formatter: '{b}: {d}%', // 文本标签的格式化字符串
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20', // 缩小字体大小
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.genderDistribution.male, name: '男性' },
              { value: this.genderDistribution.female, name: '女性' }
            ]
          }
        ]
      };
      this.genderRatioChart.setOption(optionGender);
    },

    drawChart() {
      const option = {
        tooltip: {
          show: true
        },
        series: [{
          name: '睡了',
          type: 'liquidFill',
          radius: '130px', // 缩小到原来的50%
          center: ['50%', '50%'],
          data: [0.6],
          label: {
            normal: {
              color: '#4095E5',
              insideColor: '#fff',
              textStyle: {
                fontSize: 20, // 缩小字体大小
                fontWeight: 'bold',
              }
            }
          },
          color: [{
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 1,
              color: [' #4095E5'], // 0% 处的颜色
            }, {
              offset: 0,
              color: [' #4095E5'], // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }],
          outline: {
            show: true,
            borderDistance: 0, // 缩小边框距离
            itemStyle: {
              borderColor: 'rgb(48, 65, 86)',
              borderWidth: 0// 缩小边框宽度
            }
          }
        }]
      };
      this.chart.setOption(option);
    },

    drawPieChart(ageDistribution) {  
      const optionPie = { 
        legend: {
          top: '100%', // 将图例放置在饼状图的顶部
          left: 'center' // 将图例放置在饼状图的左侧
        },
  toolbox: {
    show: true,
    feature: {
      mark: { show: false },
      dataView: { show: false, readOnly: false },
      restore: { show: false },
      saveAsImage: { show: false }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: ['0%', '40%'],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: Object.entries(ageDistribution).map(([range, value]) => ({
              value,
              name: range,
        label: {
          formatter: '{b}:{d}%', // 格式化显示的文本
          position: 'bottom', // 标签位置
          align: 'center',
          // 其他标签样式配置...
        }
              
            }))
          }  
    
  ]
      };  
      this.pieChart.setOption(optionPie);  
    },  
    async fetchOnlineCount() {
      try {
       const response = await axios.get('/api/users/online_count');
        if (!response.status==200) {
          throw new Error('Network response was not ok');
        }
        console.log('实时在线人数:',response.data.data.online_user_count);
        this.onlineCount = response.data.data.online_user_count;
        
        // 假设后端返回的是 { "status": 200, "online_user_count": 523 }  
        // 但我们依然检查 data.status 和 data.online_user_count 来确保数据的有效性  
        if (response.status === 200) {
          // 如果有需要，现在可以调用画图方法  
          this.drawNumberChart();
        } else {
          console.error('Invalid response data:', response);
        }
      } catch (error) {
        console.error('Error fetching online count:', error);
        // 在这里处理错误，比如显示一个错误消息  
      }
    },
    async fetchAge() {
      try {
        const response = await axios.get('/api/users/age_distribution');
        if (!response.status == 200) {
          throw new Error('Network response was not ok');
        }
        console.log('年龄分布:', response.data.data);
        this.ageDistribution = response.data.data;

        // 假设后端返回的是 { "status": 200, "online_user_count": 523 }  
        // 但我们依然检查 data.status 和 data.online_user_count 来确保数据的有效性  
        if (response.status === 200) {
          // 如果有需要，现在可以调用画图方法  
          this.drawPieChart(response.data.data);
        } else {
          console.error('Invalid response data:', response);
        }
      } catch (error) {
        console.error('Error fetching online count:', error);
        // 在这里处理错误，比如显示一个错误消息  
      }
    },
    async fetchActivity() {
      try {
        const response = await axios.get('/api/users/activity');
        if (!response.status == 200) {
          throw new Error('Network response was not ok');
        }
        console.log('活跃人数:', response.data.data);
        this.activity = response.data.data;

     
        if (response.status === 200) {
          // 如果有需要，现在可以调用画图方法  
          this.drawLineChart(response.data.data);
        } else {
          console.error('Invalid response data:', response);
        }
      } catch (error) {
        console.error('Error fetching online count:', error);
        // 在这里处理错误，比如显示一个错误消息  
      }
    },
  
    drawLineChart(activity) {
      const xAxisData = []; // 用于存储 x 轴数据的数组  
      const yAxisData = []; // 用于存储 y 轴数据的数组  
      const zAxisData = [];
      var hours = ['00:00', '1：00', '2：00', '3：00', '4：00', '5：00', '6：00',
        '7：00', '8：00', '9：00', '10：00', '11：00',
        '12：00', '13：00', '14：00', '15：00', '16：00', '17：00',
        '18：00', '19：00', '20：00', '21：00', '22：00'];
      // prettier-ignore
      var days = ['十天前', '九天前', '八天前',
        '七天前', '六天前', '五天前', '四天前', '三天前', '两天前', '今天'];
      // prettier-ignore
      var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0] , [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4],
       [0, 21, 3],
        [1, 0, 7],  [1, 4, 0], [1, 5, 0], 
         [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], 
          [1, 17, 7], [1, 18, 8], [1, 22, 7], [1, 23, 2],
            [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 20, 7], [2, 21, 4], 
            [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 9, 0], [3, 10, 5], [3, 11, 4],  [3, 15, 12],
             [3, 17, 5],  
              [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 19, 5],  [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1],
              [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];
    
      for (let login_date in activity) {
        if (activity.hasOwnProperty(login_date)) {
          xAxisData.push(login_date); // 将日期添加到 x 轴数据数组  
          yAxisData.push(activity[login_date]); // 将对应的人数添加到 y 轴数据数组  
        }
      }

      const optionLine = {
        tooltip: {},
        visualMap: {
          max: 20,
          inRange: {
            color: [
              '#313695',
              '#4575b4',
              '#74add1',
              '#abd9e9',
              '#e0f3f8',
              '#ffffbf',
              '#fee090',
              '#fdae61',
              '#f46d43',
              '#d73027',
              '#a50026'
            ]
          }
        },
        xAxis3D: {
          type: 'category',
          name: '时间',
          data: hours,
          axisName: {
            fontSize: 13, // 轴名称的字体大小
            color: '#313695' // 轴名称的颜色
          }
        },
        yAxis3D: {
          type: 'category',
          name: '日期',
          data: days,
          axisName: {
            fontSize: 16, // 轴名称的字体大小
            color: '#ff0000' // 轴名称的颜色
          }
        },
        zAxis3D: {
          type: 'value',
          name: '人数',
          axisName: {
            fontSize: 16, // 轴名称的字体大小
            color: '#ff0000' // 轴名称的颜色
          }
        },
        grid3D: {
          boxWidth: 80,
          boxDepth: 90,
          viewControl: {
            // projection: 'orthographic'
          },
          light: {
            main: {
              intensity: 1.2,
              shadow: true
            },
            ambient: {
              intensity: 0.3
            }
          }
        },
        series: [
          {
            type: 'bar3D', // 使用bar3D组件
            data: data.map(function (item) {
              return {
                value: [item[1], item[0], item[2]]
              };
            }),
            shading: 'lambert',
            label: {
              show: true,
              position: 'right',
              formatter: function (param) {
                return param.value.name;
              }
            },
            itemStyle: {
              opacity: 0.8
            },
            emphasis: {
              label: {
                show: true
              }
            },
            // 其他配置选项...
          }
        ]
      };
      this.lineChart.setOption(optionLine);
    },
  drawNumberChart() {
      const optionNumber = {
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: this.onlineCount,
                fontSize: 80,
                fontWeight: 'bold',
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: 'transparent',
                stroke: '#000',
                lineWidth: 1
              },
              keyframeAnimation: {
                duration: 3000,
                loop: false,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: 'transparent',
                      lineDashOffset: 200,
                      lineDash: [200, 0]
                    }
                  },
                  {
                    // Stop for a while.
                    percent: 0.8,
                    style: {
                      fill: 'transparent'
                    }
                  },
                  {
                    percent: 1,
                    style: {
                      fill: 'rgb(48, 65, 86)'
                    }
                  }
                ]
              }
            }
          ]
        }
      };
      this.numberChart.setOption(optionNumber);
    }, 
    // drawNumberChart() {
    //   const optionNumber = {
    //     graphic: {
    //       elements: [
    //         {
    //           type: 'text',
    //           left: 'center',
    //           top: 'center',
    //           style: {
    //             text: "1", // 使用从后端获取的数据  
    //             fontSize: 80,
    //             fontWeight: 'bold',
    //             lineDash: [0, 200],
    //             lineDashOffset: 0,
    //             fill: 'transparent',
    //             stroke: '#000',
    //             lineWidth: 1
    //           },
    //           keyframeAnimation: {
    //             duration: 3000,
    //             loop: false,
    //             keyframes: [
    //               {
    //                 percent: 0.7,
    //                 style: {
    //                   fill: 'transparent',
    //                   lineDashOffset: 200,
    //                   lineDash: [200, 0]
    //                 }
    //               },
    //               {
    //                 // Stop for a while.
    //                 percent: 0.8,
    //                 style: {
    //                   fill: 'transparent'
    //                 }
    //               },
    //               {
    //                 percent: 1,
    //                 style: {
    //                   fill: 'black'
    //                 }
    //               }
    //             ]
    //           }
    //         }
    //       ]
    //     }
    //   };
    //   this.numberChart.setOption(optionNumber); 
    // }, 
    // drawMyChart() {
    //   const dataList = [
    //     {
    //       name: "北京",
    //       value: 54,
    //     },
    //     {
    //       name: "南海诸岛",
    //       value: 0,
    //     },
    //     {
    //       name: "天津",
    //       value: 13,
    //     },
    //     {
    //       name: "上海",
    //       value: 40,
    //     },
    //     {
    //       name: "重庆",
    //       value: 75,
    //     },
    //     {
    //       name: "河北",
    //       value: 13,
    //     },
    //     {
    //       name: "河南",
    //       value: 83,
    //     },
    //     {
    //       name: "云南",
    //       value: 11,
    //     },
    //     {
    //       name: "辽宁",
    //       value: 19,
    //     },
    //     {
    //       name: "黑龙江",
    //       value: 15,
    //     },
    //     {
    //       name: "湖南",
    //       value: 69,
    //     },
    //     {
    //       name: "安徽",
    //       value: 60,
    //     },
    //     {
    //       name: "山东",
    //       value: 39,
    //     },
    //     {
    //       name: "新疆",
    //       value: 4,
    //     },
    //     {
    //       name: "江苏",
    //       value: 31,
    //     },
    //     {
    //       name: "浙江",
    //       value: 104,
    //     },
    //     {
    //       name: "江西",
    //       value: 36,
    //     },
    //     {
    //       name: "湖北",
    //       value: 1052,
    //     },
    //     {
    //       name: "广西",
    //       value: 33,
    //     },
    //     {
    //       name: "甘肃",
    //       value: 7,
    //     },
    //     {
    //       name: "山西",
    //       value: 9,
    //     },
    //     {
    //       name: "内蒙古",
    //       value: 7,
    //     },
    //     {
    //       name: "陕西",
    //       value: 22,
    //     },
    //     {
    //       name: "吉林",
    //       value: 4,
    //     },
    //     {
    //       name: "福建",
    //       value: 18,
    //     },
    //     {
    //       name: "贵州",
    //       value: 5,
    //     },
    //     {
    //       name: "广东",
    //       value: 98,
    //     },
    //     {
    //       name: "青海",
    //       value: 1,
    //     },
    //     {
    //       name: "西藏",
    //       value: 0,
    //     },
    //     {
    //       name: "四川",
    //       value: 44,
    //     },
    //     {
    //       name: "宁夏",
    //       value: 4,
    //     },
    //     {
    //       name: "海南",
    //       value: 22,
    //     },
    //     {
    //       name: "台湾",
    //       value: 3,
    //     },
    //     {
    //       name: "香港",
    //       value: 5,
    //     },
    //     {
    //       name: "澳门",
    //       value: 5,
    //     },
    //   ];

     

    //   const optionMychart = {
    //     title: {
    //       text: "全国好友分布图",
    //       subtext: "朝阳",
    //       left: "center",
    //       textStyle: {
    //         color: "#fff",
    //         fontSize: 30,
    //       },
    //       subtextStyle: {
    //         fontSize: 20,
    //       },
    //     },
    //     tooltip: {
    //       triggerOn: "click",
    //       formatter: function (e, t, n) {
    //         return e.seriesName + "<br />" + e.name + "：" + e.value;
    //       },
    //     },
    //     // 热力地图
    //     visualMap: {
    //       min: 0,
    //       max: 1000,
    //       left: 240,
    //       textStyle: {
    //         color: "#fff",
    //       },
    //       pieces: [
    //         {
    //           gt: 100,
    //           label: "> 100 人",
    //           color: "#7f1100",
    //         },
    //         {
    //           gte: 10,
    //           lte: 100,
    //           label: "10 - 100 人",
    //           color: "#ff5428",
    //         },
    //         {
    //           gte: 1,
    //           lt: 10,
    //           label: "1 - 9 人",
    //           color: "#ff8c71",
    //         },
    //         {
    //           value: 0,
    //           label: "无",
    //           color: "#ffd768",
    //         },
    //       ],
    //     },

    //     series: [
    //       {
    //         name: "好友数",
    //         data: dataList,
    //         type: "map",
    //         map: "china",
    //         zoom: 1.2,
    //         aspectScale: 0.75,
    //         label: {
    //           // 默认文本标签样式
    //           normal: {
    //             color: "white",
    //             show: true,
    //           },
    //           // 高亮文本标签样式
    //           emphasis: {
    //             color: "yellow",
    //             fontSize: 22,
    //             fontWeight: "bold",
    //           },
    //         },
    //         itemStyle: {
    //           // 默认区域样式
    //           normal: {
    //             // 区域背景透明
    //             areaColor: "transparent",
    //             borderColor: "rgba(39,211,233, 1)",
    //             borderWidth: 1,
    //           },
    //           // 高亮区域样式
    //           emphasis: {
    //             // 高亮区域背景色
    //             areaColor: "#01ADF2",
    //           },
    //         },
    //       },
    //     ],
    //   };

    //   this.chart.setOption(optionMychart);

    //   // 添加窗口大小改变监听事件，当窗口大小改变时，图表会重新绘制，自适应窗口大小
    //   // window.addEventListener("resize", function () {
    //   //   myChart.resize();
    //   // });
    // },
  },  
   
  beforeDestroy() {  
    // 清理图表实例  
    if (this.chart) {  
      this.chart.dispose();  
    }
     if (this.pieChart) {  
      this.pieChart.dispose();  
    }  
    if (this.lineChart) {  
      this.lineChart.dispose();  
    }  
  },  
};   

</script>

<style scoped>

    .container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  
    .cards-row {
      /* 确保父容器是flex布局 */
        display: flex;
        /* 防止子元素换行 */
        flex-wrap: nowrap;
        /* 设置子元素的水平间距 */
        justify-content:center;
        height: 25%;
        padding: 70px;
       
    }
    .cards-row .card {
      /* 设置每个卡片的外边距 */
      margin: 0 10px;
      /* 上和下边距为0，左右边距为2px */
      /* 如果卡片本身有边框或者padding，可能需要调整这里的边距值 */
      width: 25%;
      /* 减少卡片内边距 */
        box-shadow: var(--el-box-shadow-dark);
        /* 调整阴影效果 */
        font-weight: bold;
          color: var(--el-text-color-regular);
          background: var(--el-bg-color-overlay);
          border-color: var(--el-border-color);
        display: flex;
        flex-direction: column;
        border-radius: 5px;
    }
 
  
    .cards-row2 {
        display: flex;
          /* 防止子元素换行 */
          flex-wrap: nowrap;
          /* 设置子元素的水平间距 */
          justify-content: center;
         
          height: 55%;
    }
  
    .big-card {
      width: 35%;
      margin: 0 30px;
      /* 减少卡片外边距 */
    box-shadow: var(--el-box-shadow-dark);
      /* 调整阴影效果 */
      font-weight: bold;
      color: var(--el-text-color-regular);
      background: var(--el-bg-color-overlay);
      border-color: var(--el-border-color);
      display: flex;
      flex-direction: column;
      border-radius: 5px;
    }
    .card-title {
          /* 标题的样式 */
          font-size: 20px;
          /* font-weight: bold; */
          margin: 10px;
          justify-content: center;
          
        }
    .separator {
                  /* 分割线的样式 */
                  width: 100%;
                  height: 1px;
                  background-color: #cccccc;
                 
                  justify-content: center;
                  /* 添加一些垂直间距 */
                }
                                    .text-center {
                                      text-align: center;
                                    }
</style>